<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Layui数据服务平台</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
</head>
<body>
            <!-- 搜索条件 -->
            <fieldset class="layui-elem-field">
                <legend>筛选条件</legend>
                <div class="layui-field-box">
                    <div class="layui-form-item layui-form-pane">
                        <label class="layui-form-label">权限名称</label>
                        <div class="layui-input-inline">
                            <input type="text" id="sreach_roleName" placeholder="权限名称" class="layui-input">
                        </div>

                        <label class="layui-form-label">权限级别</label>
                        <div class="layui-input-inline">
                            <input type="text" id="sreach_roleLevel" placeholder="权限级别" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item layui-form-pane">
                        <div class="layui-inline">
                            <button class="layui-btn layui-btn-radius layui-btn-warm" id="iReset">重置</button>
                            <button class="layui-btn layui-btn-radius layui-btn-normal" id="searchVal">搜索</button>
                        </div>
                    </div>
                </div>
            </fieldset>

            <!-- 动态数据表格 -->
            <table class="layui-hide" id="test" lay-filter="test"></table>

            <script type="text/html" id="toolbarDemo">
                <div class="layui-btn-container">
                    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
                    <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
                    <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
                    <button class="layui-btn layui-btn-sm" lay-event="insert_data">新增数据</button>
                </div>
            </script>

            <script type="text/html" id="barDemo"> <!-- 通过script定义的html代码，默认是隐藏的，只有在js调用渲染时，才会出现 -->
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </script>

            <script type="text/html" id="insert_form">
                <div class="layui-field-box">
                    <div class="layui-form-item layui-form-pane">
                        <label class="layui-form-label">权限名称</label>
                        <div class="layui-input-inline">
                            <input type="text" id="insert_roleName" class="layui-input" placeholder="请输入权限名称">
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-pane">
                        <label class="layui-form-label">权限级别</label>
                        <div class="layui-input-inline">
                            <input type="text" id="insert_roleLevel" class="layui-input" placeholder="请输入权限级别">
                        </div>
                    </div>
                </div>
            </script>

            <script type="text/html" id="update_form">
                <div class="layui-field-box">
                    <div class="layui-form-item layui-form-pane">
                        <label class="layui-form-label">主键ID</label>
                        <div class="layui-input-inline">
                            <input type="text" id="update_id" class="layui-input" readonly>
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-pane">
                        <label class="layui-form-label">权限名称</label>
                        <div class="layui-input-inline">
                            <input type="text" id="update_roleName" class="layui-input" placeholder="请输入权限名称">
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-pane">
                        <label class="layui-form-label">权限级别</label>
                        <div class="layui-input-inline">
                            <input type="text" id="update_roleLevel" class="layui-input" placeholder="请输入权限级别">
                        </div>
                    </div>
                </div>
            </script>

<script src="/layui/layui.js"></script>
<script src="/jquery/jquery-3.6.0.js"></script>
<script>
    //JS
    layui.use(['element', 'layer', 'util'], function(){
        var element = layui.element
            ,layer = layui.layer
            ,util = layui.util
            ,$ = layui.$;

        //头部事件
        util.event('lay-header-event', {
            //左侧菜单事件
            menuLeft: function(othis){
                layer.msg('展开左侧菜单的操作', {icon: 0});
            }
            ,menuRight: function(){
                layer.open({
                    type: 1
                    ,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
                    ,area: ['260px', '100%']
                    ,offset: 'rt' //右上角
                    ,anim: 5
                    ,shadeClose: true
                });
            }
        });

    });

    $("#iReset").click(function () {
        $("#sreach_roleName").val("");
        $("#sreach_roleLevel").val("");
        tableShow();
    });

    $("#searchVal").click(function () {
        let roleName = $("#sreach_roleName").val();
        let roleLevel = $("#sreach_roleLevel").val();
        let paramJSON = {roleName:roleName, roleLevel:roleLevel};
        tableShow(paramJSON);
    });

    function tableShow(paramJSON) {
        if(!paramJSON) {             // 判断paramJSON对象不存在的时候，给它一个默认值
            paramJSON = {};
        }

        layui.use('table', function(){
            var table = layui.table;
            table.render({
                elem: '#test'
                ,where: paramJSON
                ,url:'/role/selectForPage'         // 相对路径与绝对路径
                ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                    title: '提示'
                    ,layEvent: 'LAYTABLE_TIPS'
                    ,icon: 'layui-icon-tips'
                }]
                ,title: '用户数据表'
                ,cols: [[
                    {type: 'checkbox', fixed: 'left'}
                    ,{title:'ID', width:80, templet: function(data){
                            return '<em>'+ data.id +'</em>'
                        }}
                    ,{title:'权限名称', width:120, templet: function(data){
                            return '<em>'+ data.roleName +'</em>'
                        }}
                    ,{title:'权限级别', width:120, templet: function(data){
                            return '<em>'+ data.roleLevel +'</em>'
                        }}
                    ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
                ]]
                ,page: true
            });

            //头工具栏事件
            table.on('toolbar(test)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id);
                switch(obj.event){
                    case 'getCheckData':
                        var data = checkStatus.data;
                        // JSON.stringify(data);    // 它的作用是把一个对象(JSONObject   JSONArray)转成字符串形态
                        // JSON.parse("String");    // 把一个字符串转换成一个对象(JSONObject   JSONArray)
                        // 上述的两个方法，是隶属于JS原生的，不是LayUI，这两个方法如果转换的对象不是json类型的，那么会抛出错误
                        // layer.alert(JSON.stringify(data));
                        console.log(data);         // 此方法是把一个js中的对象或者字符串展示到页面的控制台中
                        break;
                    case 'getCheckLength':
                        var data = checkStatus.data;
                        layer.msg('选中了：'+ data.length + ' 个');
                        break;
                    case 'isAll':
                        layer.msg(checkStatus.isAll ? '全选': '未全选');
                        break;
                    case 'insert_data':
                        //弹出表单
                        layer.open({
                            type: 1
                            ,title: '新增权限数据' //不显示标题栏
                            ,closeBtn: false
                            ,area: ['500px','500px']  // 宽和高
                            ,shade: 0.8
                            ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
                            ,btn: ['新增', '取消']
                            ,btnAlign: 'c'
                            ,moveType: 1 //拖拽模式，0或者1
                            ,content: $('#insert_form').html()         // 引入自定义表单
                            ,btn1: function(index, layero){            // 这个是新增按钮点击事件
                                let roleName = $("#insert_roleName").val();
                                let roleLevel = $("#insert_roleLevel").val();
                                if(roleName === "" || roleLevel === "") {
                                    layer.msg("请填写完整权限名称或者权限级别");
                                }
                                else {
                                    $.ajax({
                                        url:"/role/insert",   // 请求路径
                                        type:"post",            // 请求的方式，不区分大小写
                                        cache:false,            // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
                                        contentType:"application/json;charset=utf-8",
                                        data:JSON.stringify({
                                            roleName:roleName,
                                            roleLevel:roleLevel
                                        }),
                                        datatype:"json",        // 返回类型，text文本、html页面、json数据
                                        success:function(response){
                                            console.log("返回: " + response);
                                            layer.msg(response.msg);
                                            if(response.code === 200) {
                                                layer.close(index);
                                                tableShow();
                                            }
                                        },
                                        error:function(response){
                                            console.log("出错返回: " + response);
                                            console.log("出错数据: " + JSON.stringify(response));
                                        }
                                    });
                                }
                            }
                            ,success: function(layero){

                            }
                        });
                        break;

                    //自定义头工具栏右侧图标 - 提示
                    case 'LAYTABLE_TIPS':
                        layer.alert('这是工具栏右侧自定义的一个图标按钮');
                        break;
                };
            });

            //监听行工具事件
            table.on('tool(test)', function(obj){
                var data = obj.data;
                //console.log(obj)
                if(obj.event === 'del'){
                    layer.confirm('真的删除行么', function(index){
                        // obj.del();
                        $.ajax({
                            url:"/role/deleteById",   // 请求路径
                            type:"post",            // 请求的方式，不区分大小写
                            cache:false,            // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
                            data:{
                                id:data.id
                            },
                            datatype:"json",        // 返回类型，text文本、html页面、json数据
                            success:function(response){
                                console.log("返回: " + response);
                                layer.msg(response.msg);
                                tableShow();
                            },
                            error:function(response){
                                console.log("出错返回: " + response);
                                console.log("出错数据: " + JSON.stringify(response));
                            }
                        });
                        layer.close(index);
                    });
                } else if(obj.event === 'edit'){
                    //弹出表单
                    layer.open({
                        type: 1
                        ,title: '编辑权限' //不显示标题栏
                        ,closeBtn: false
                        ,area: ['500px','500px']  // 宽和高
                        ,shade: 0.8
                        ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
                        ,btn: ['更新', '取消']
                        ,btnAlign: 'c'
                        ,moveType: 1 //拖拽模式，0或者1
                        ,content: $('#update_form').html()         // 引入自定义表单
                        ,btn1: function(index, layero){            // 这个是新增按钮点击事件
                            $.ajax({
                                url:"/role/updateById",   // 请求路径
                                type:"post",            // 请求的方式，不区分大小写
                                cache:false,            // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
                                contentType:"application/json;charset=utf-8",
                                data:JSON.stringify({
                                    id:data.id,
                                    roleName:$("#update_roleName").val(),
                                    roleLevel:$("#update_roleLevel").val()
                                }),
                                datatype:"json",        // 返回类型，text文本、html页面、json数据
                                success:function(response){
                                    console.log("返回: " + response);
                                    layer.msg(response.msg);
                                    layer.close(index);
                                    tableShow();
                                },
                                error:function(response){
                                    console.log("出错返回: " + response);
                                    console.log("出错数据: " + JSON.stringify(response));
                                }
                            });
                        }
                        ,success: function(layero){
                            $("#update_id").val(data.id);
                            $("#update_roleName").val(data.roleName);
                            $("#update_roleLevel").val(data.roleLevel);
                        }
                    });
                }
            });
        });
    }

    tableShow();

    // 新增数据弹出表单
    function openLayer(){

    }
</script>
</body>
</html>